import React from 'react';
import { obj_str, is_empty } from 'sui';

const StepView = ({ main }) => {
    const getMsn = () => {
        if (is_empty(main)) {
            return null;
        }

        return main.map(d => {
            const sn = obj_str(d, "sn");
            const pos = obj_str(d, "pos");

            return (
                <div key={sn} className="flex flex-col bg-blue-500 m-2">
                    <div className="text-base w-40 text-center">{sn}</div>
                    <div className="text-base w-40 text-center">{pos}</div>
                </div>
            );
        });
    };

    return (
        <div className="flex flex-wrap content-start">
            {getMsn()}
        </div>
    );
};

export {StepView};
